<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>简单的jQuery手风琴效果</title>
		<script src="./js/jquery-1.7.2.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/style.css">
	</head>

	<body>
		<div class="xinxi_solution_main">
			<div class="xinxi_solution_bg">
				<div class="main_mobile">
					<ul>
						<li class="one on">
							<div class="left"></div>
							<div class="left_top">
								<i>工业类</i><img src="images/button1.png" alt="工业">
							</div>
							<div class="right">
								<dl>
									<a title="食品加工行业解决方案" href="#">
										食品加工行业解决方案</a>
									<a title="汽车零部件行业解决方案" href="#">
										汽车零部件行业解决方案</a>
									<a title="家具生产行业解决方案  " href="#">
										家具生产行业解决方案 </a>
									<a title="智能生产制造解决方案" href="#">
										智能生产制造解决方案</a>
									<a title="食品加工行业解决方案" href="#">
										食品加工行业解决方案</a>
								</dl>
							</div>
						</li>
						<li class="one">
							<div class="left"></div>
							<div class="left_top">
								<i>商贸类</i><img src="images/button1.png" alt="工业">
							</div>
							<div class="right">
								<dl style="margin-top: -120px;">
									<a title="手机通讯行业解决方案" href="#">
										手机通讯行业解决方案</a>
									<a title="五金配件行业解决方案" href="#">
										五金配件行业解决方案</a>
									<a title="家电卖场行业解决方案" href="#">
										家电卖场行业解决方案</a>
								</dl>
							</div>
						</li>
						<li class="one">
							<div class="left"></div>
							<div class="left_top">
								<i>服务类</i><img src="images/button1.png" alt="工业">
							</div>
							<div class="right">
								<dl>
									<a title="餐饮行业解决方案" href="#">
										餐饮行业解决方案</a>
									<a title="会员解决方案" href="#">
										会员解决方案</a>
								</dl>
							</div>
						</li>
						<li class="one">
							<div class="left"></div>
							<div class="left_top">
								<i>售后服务</i><img src="images/button1.png" alt="工业">
							</div>
							<div class="right">
								<dl>
									<a title="软件服务支持" href="#">
										软件服务支持</a>
								</dl>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		$(function() {
			$('.xinxi_solution_main ul li:eq(0)').addClass('on');
			$('.xinxi_solution_main ul li:eq(1)').addClass('b2');
			$('.xinxi_solution_main ul li:eq(2)').addClass('b3');
			$('.xinxi_solution_main ul li:eq(3)').addClass('b4');
			$('.xinxi_solution_main ul li:eq(4)').addClass('b5');
			$('.xinxi_solution_main ul li:eq(5)').addClass('b6');
			$('.xinxi_solution_main ul li:gt(3)').hide();
			//当三级分类大于7个的是，成两排显示
			$('.xinxi_solution_main ul li').each(function() {
				var len = $(this).find('.right dl a').length;
				if(len > 6) {
					$(this).find('.right dl a').addClass('yichu');
				}
			});

			//解决方案效果
			$('.xinxi_solution_main ul li').each(function() {
				var left_h = $(this).find('.left_top').height();
				$(this).find('.left_top').css({
					'top': '50%',
					'margin-top': -left_h / 2
				});

				var dl_h = $(this).find('.right dl').height();
				$(this).find('.right dl').css({
					'margin-top': -dl_h / 2
				});
			});
			$('.xinxi_solution_main ul li').click(function() {
				$(this).addClass('on').siblings().removeClass('on');
			});
			$('.xinxi_solution_main_mobile ul li:first-child').addClass('on');

			$('.xinxi_solution_main_mobile ul li').click(function() {
				$(this).addClass('on').siblings().removeClass('on');
			});

			$(".solu-category .solu-description").each(function() {
				var maxwidth = 60;
				if($(this).text().length > maxwidth) {
					$(this).text($(this).text().substring(0, maxwidth));
					$(this).html($(this).html() + '...');
				}
			});

		});
	</script>

</html>